Table of Contents

1、在需要点击触发事件的位置加上click事件

2、在点击区域内合适的地方加上图标

3、实现foldSwitch方法

4、实现changeStyle方法

VUE+element UI

这里简单记录如何手动实现手风琴，在使用不了现成的情况下，因为涉及到公司项目，所以一下总结的比较稀碎，合适有vue和element UI的基础的同学看，请见谅，我会把关键的点都记录下来。

 foldSwitch方法是点击的时候触发的，实现的目标有二：

1，实现该点击的列表展开或关闭

2，在点击列表展开的同时，其他列表要关闭

index：是for循环遍历的index，这个是用来判断是第几项被点击的。

这个是跟折叠面板的图标一样，展开的时候箭头向下，折叠的时候箭头向右。

status是个数组：

为什么我需要status？我的实际情况是我能确定的我的折叠面板最多三个，里面初始化都是false，说明都是默认折叠的。

比如说我点击了第一个列表，index=1，那么此时的status为status: [true, false, false]，导致的情况是第一个列表的图标变化。以此类推。

changeStyle方法接下来细讲。

折叠的状态是从true变为false，所以先完成折叠操作，在给status重新赋值。

至于为什么要多写一句

这个是重点也是关键

因为每次点击触发展开或折叠操作，变化的是status数组里面的数据，不是整个status数组，所以vue是检测不到status是已经发生改变的，解决办法就是加上面这句，让status重新生成，地址变化，vue检测到变化就会自动渲染到页面上，这时展开或折叠才会发生视觉效果。

展开也是重点，因为是手风琴，所以只能展开一项。我用到了for循环，判断是否等于当前点击的这一列表，如果是，该列表会展开，其他都会折叠，这样就达到了手风琴效果。

该方法是比较原生的了，直接操作dom节点让列表展示或消失。

status：状态，“none”表示折叠，“block”表示展开；

className：类名，被折叠或展开的类名；

index：索引，表示该类名的dom节点的第几个，也就是第几个列表被展开或折叠。